<template>
    <div id="app" class="min-h-screen bg-base-200 py-8">
        <div class="max-w-[94%] mx-auto px-4">
            <!-- 标题 -->
            <h1 class="text-3xl font-bold text-center text-base-content mb-8">
                LTCTM的软件导航v3
            </h1>
            <!-- 搜索框 -->
            <div class="flex justify-center mb-8">
                <input v-model="searchQuery" placeholder="输入“装机”来筛选所有Windows装机必备软件"
                    class="input input-bordered input-primary w-full max-w-lg" />
            </div>
            <!-- 列表 -->
            <div v-if="filteredBlocks.length > 0" class="grid grid-cols-1 xl:grid-cols-2 gap-4">
                <!-- 软件对象 -->
                <Card v-for="block in filteredBlocks" :key="block.name" :block="block" />
            </div>
            <div v-else class="text-center text-base-content">
                <!-- No blocks found. -->
            </div>
        </div>
    </div>
</template>

<script>
import Card from "./components/Card.vue";
export default {
    name: "App",
    components: {
        Card,
    },
    data() {
        return {
            searchQuery: '装机',
            blocks: [],
        };
    },
    computed: {
        filteredBlocks() {
            return this.blocks.filter(block => {
                const query = this.searchQuery.toLowerCase();
                return (
                    block.name.toLowerCase().includes(query) || // 检查标题
                    block.alias.some(alias => alias.toLowerCase().includes(query)) // 检查 alias 列表
                );
            });
        }
    },
    async created() {
        try {
            const response = await fetch('/software_data.json');
            if (!response.ok) {
                throw new Error('software_data.json not found');
            }
            this.blocks = await response.json();
        } catch (error) {
            console.error('There was a problem with the fetch operation:', error);
        }
    },
};
</script>